<template>
    <div ref="microcirculationContent" >
        <h3 class="dialog-plate-title"><span>结果上传</span></h3>
        <el-button type="primary" @click="insertHOtherCheck()">新增</el-button>
        <el-table :data="table.tableData.tableDataForMicrocirculation" stripe border class="company-table">
              <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
              <el-table-column prop="checkDate" label="检测日期" sortable min-width="100">
                <template slot-scope="scope">
                  {{timestampToTime(scope.row.checkDate,'yyyy-mm-dd')}}
                </template>
              </el-table-column>
              <el-table-column prop="uploadDate" label="上传日期" sortable min-width="130">
                <template slot-scope="scope">
                  {{timestampToTime(scope.row.uploadDate,'yyyy-mm-dd hh:mm')}}
                </template>
              </el-table-column>
              <el-table-column prop="uploadUserName" label="上传人" sortable min-width="200"></el-table-column>
              <el-table-column fixed="right" label="操作" align="center" min-width="75">
                  <template slot-scope="scope">
                      <el-button  @click="insertUpdateCheck(scope.row)" type="text" size="small">详情</el-button>
                  </template>         
              </el-table-column>
          </el-table>
        <el-dialog :title="dialogList.dialogForMicrocirculation.title" :visible.sync="dialogList.dialogForMicrocirculation.isShow" append-to-body fullscreen width="100%" top="60px" center  class="dialog-form">
            <el-form :inline="true" ref='stressM' :model="microcirculationForm" label-width="140px" class="demo-ruleForm">
                <el-form-item label="甲襞反射部位" >
                    <el-select v-model="microcirculationForm.part"  placeholder="请选择">
                        <el-option
                        v-for="item in elselects.partSelectData"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="血管形态"  >
                    <el-select v-model="microcirculationForm.booldvesselsFormName" multiple placeholder="请选择">
                        <el-option
                        v-for="item in elselects.booldvesselsFormData"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="血管流态"  >
                    <el-select v-model="microcirculationForm.booldvesselsFlowName"  placeholder="请选择">
                        <el-option
                        v-for="item in elselects.booldvesselsFlowData"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="袢周" >
                    <el-select v-model="microcirculationForm.weekLoops"  placeholder="请选择">
                        <el-option
                        v-for="item in elselects.weekLoopsData"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="甲襞反射部位状态" >
                    <el-select v-model="microcirculationForm.wxhState"  placeholder="请选择">
                        <el-option
                        v-for="item in elselects.wxhStateData"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div style="width:100%;">
                        <el-button type="primary" @click="submitMicrocirculation" >提交</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="附件上传" style="display:block;">
                    <template slot="label">检测前视频：</template>
                    <div :span="19" class="avatar">
                        <!-- <div class="pic_img_box">
                        <el-upload class="avatar-uploader el-upload--text" 
                            :action="constant.actionUrl" 
                            :show-file-list="false" 
                            :on-success="handleVideoSuccess" 
                            :before-upload="beforeUploadVideo"
                            :on-progress="uploadVideoProcess">
                        
                        </el-upload>
                        <P class="text">请保证视频格式正确，且不超过10M</P>
                        </div> -->
                        <!-- <div v-for="item in fileList" style="width:1060px;height:1520px;">
                            <img :src="item.url" style="width:1060px;height:1520px;">
                        </div> -->
                                      <!-- <el-upload class="avatar-uploader"
                                        :action="constant.actionUrl"
                                        :on-progress="uploadVideoProcess"
                                        :on-success="handleVideoSuccess"
                                        :before-upload="beforeUploadVideo"
                                        :show-file-list="false">
                                    <video v-if="videos.preVideoData !=''"
                                        :src="videos.preVideoData"
                                        class="avatar video-avatar"
                                        controls="controls">
                                        您的浏览器不支持视频播放
                                    </video>
                                    <i v-else-if="videos.preVideoData ==''"
                                    class="el-icon-plus avatar-uploader-icon"></i>
                                    <el-progress 
                                                type="circle"
                                                :percentage="videoUploadPercent"
                                                style="margin-top:7px;"></el-progress>
                                </el-upload> -->
                        <!-- <div class="pic_img">
                            <div class="pic_img_box">
                  
                            </div>
                        </div> -->                                     
                    <uploadVideo v-bind:bodyRecodeId="bid" v-bind:cVal="cVal" v-bind:type="1" v-bind:filePath="filePath" @sendData="getDataFromChild"></uploadVideo>
                    </div>
                </el-form-item>
                <el-form-item>
                    <template slot="label">检测后视频：</template>
                    <div :span="19" style="float:left;"> 
                    <uploadVideo v-bind:bodyRecodeId="bid" v-bind:cVal="cVal"  v-bind:type="2"  v-bind:afterFilePath="afterFilePath" @sendData="getDataFromChild"></uploadVideo>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import microcirculationApi from 'plugins/myaxios/apis/microcirculation.js';
import uploadVideo from 'views/operationManage/components/video/uploadVideo.vue';

import api from 'plugins/axios/api.js';
export default {
    name:'microcirculation',
    props:['bid','cVal'],
    components:{
        uploadVideo
    },
    data(){
        return{
          bodyRecodeId:null,
          filePath:null,
          afterFilePath:null,
          fileList:[],
          constant:{
              cval:this.bid,
              actionUrl:'',
          },
          elselects:{
              partSelectData:[

              ],
              booldvesselsFormData:[

              ],
              booldvesselsFlowData:[

              ],
              weekLoopsData:[

              ],
              wxhStateData:[
     
              ],
          },
          videos:{
              preVideoData:[],
              lateVideoData:[],
          },
          microcirculationForm:{
              part:'',                                //甲襞反射部位编码
              partName:'',                            //甲襞反射部位名称
              booldvesselsForm:'',                    //血管形态
              booldvesselsFormName:'',                //血管形态名称
              booldvesselsFlow:'',                    //血管流态
              booldvesselsFlowName:'',                //血管流态名称
              weekLoops:'',                           //袢周
              weekLoopsName:'',                       //袢周名称
              wxhState:'',                            //甲襞反射部位状态
              wxhStateName:'',                        //甲襞反射部位状态名称集合
              checkUserName:'',                       //上传护士
              uploadUser:'',                          //上传护士Id
              id:'',                                  //id
              bid:'',                                 //体检ID
          },
          table:{
              tableData:{
                  tableDataForMicrocirculation:[]
              }
          },
          dialogList:{
              dialogForMicrocirculation:{
                  title:'',
                  isShow:false,
              }
          }  
        }
    },
    created(){
     this.$nextTick(()=>{
            this.init();
        });
    },
    mounted(){
   
    },
    watch:{
        bid(newbid,oldCardid){
            this.constant.cval = newbid;
            this.queryMicrocirculation(newbid);
        },
        cVal(newv,old){
           this.queryMicrocirculation(this.bid);  
        },
    },
    computed:{
        divAutoHeight(){
            return this.$store.state.clientHeight-100;
        },
    },
    methods:{
        init(){
            let self = this;
            self.initElselects();
            self.queryMicrocirculation();
        },
        getDataFromChild(val){
            let self = this;
            debugger;
            if(val.type==1){
                self.microcirculationForm.filePath =  val.url;
            }else{
                self.microcirculationForm.afterFilePath = val.url;
            }
        },
        initElselects(){
           let self = this;
           api.getCodeDataByCodeType('part').then(res=>{ //甲襞反射部位
             self.elselects.partSelectData = res.content;
           });
           api.getCodeDataByCodeType('booldvesselsForm').then(res=>{//血管形态
             self.elselects.booldvesselsFormData = res.content;
           });
           api.getCodeDataByCodeType('booldvesselsFlow').then(res=>{//血管流态
             self.elselects.booldvesselsFlowData = res.content;
           });
           api.getCodeDataByCodeType('weekLoops').then(res=>{//袢周
             self.elselects.weekLoopsData = res.content;
           }); 
           api.getCodeDataByCodeType('wxhState').then(res=>{//甲襞反射部位状态
             self.elselects.wxhStateData = res.content;
           }); 
        },
        setUploadVideoUrl(){
            let self = this;
            self.constant.actionUrl = microcirculationApi.idImgUploadForMicrocirculation(self.bid);
        },
        submitMicrocirculation(){
            let self = this;
            let formData =  self.microcirculationForm.booldvesselsFormName;
            let subData =[];
            // debugger;
            // self.microcirculationForm.filePath = self.filePath;
            // self.microcirculationForm.afterfilePath = self.afterfilePath;

            if(formData!=null && formData!=undefined && formData.length>0){
                formData.forEach(element => {
                    if(typeof element == 'string')
                        subData.push({code:element})
                        else
                        subData.push(element);
                });
            }
            self.microcirculationForm.booldvesselsFormName = subData;
            microcirculationApi.updateMicrocirculation(self.microcirculationForm).then(res=>{
                self.dialogList.dialogForMicrocirculation.isShow = false;
                self.queryMicrocirculation();
            });
        },
        insertHOtherCheck(){
            let self = this;
           microcirculationApi.insertMicrocirculation({bid:self.bid}).then(res=>{
               self.queryMicrocirculation();
           });
        },
        insertUpdateCheck(row){
        let self = this;
        self.microcirculationForm = row;
        debugger;
        self.filePath = self.microcirculationForm.filePath;
        self.afterFilePath = self.microcirculationForm.afterFilePath;
        self.dialogList.dialogForMicrocirculation.isShow = true;
        },
        queryMicrocirculation(){
            let self = this;
            microcirculationApi.queryMicrocirculation(self.bid).then(res=>{
                self.table.tableData.tableDataForMicrocirculation = res.content;
            });
        }, 
    },
}
</script>
<style scoped>

</style>